<template>
    <div class="modal-example">
        <button class="example-btn" @click="openBasicModal">基础弹窗</button>
        <button class="example-btn" @click="openCustomModal">自定义底部弹窗</button>
        <button class="example-btn" @click="openDraggableModal">可拖拽弹窗</button>
        <button class="example-btn" @click="openLongContentModal">长内容弹窗</button>
        
        <!-- 基础弹窗 -->
        <Modal 
            v-model="basicModalVisible" 
            title="基础弹窗" 
            @cancel="handleCancel"
            @confirm="handleConfirm">
            <p>这是一个基础弹窗示例，包含默认的确定和取消按钮。</p>
        </Modal>
        
        <!-- 自定义底部弹窗 -->
        <Modal 
            v-model="customModalVisible" 
            title="自定义底部弹窗">
            <p>这是一个自定义底部按钮的弹窗示例。</p>
            
            <template #footer>
                <button class="custom-btn">返回</button>
                <button class="custom-btn custom-btn-primary">保存</button>
                <button class="custom-btn custom-btn-danger">删除</button>
            </template>
        </Modal>
        
        <!-- 可拖拽弹窗 -->
        <Modal 
            v-model="draggableModalVisible" 
            title="可拖拽弹窗" 
            :draggable="true">
            <p>这是一个可拖拽的弹窗示例，点击标题栏并拖动可以移动弹窗位置。</p>
        </Modal>
        
        <!-- 长内容弹窗 -->
        <Modal 
            v-model="longContentModalVisible" 
            title="长内容弹窗" 
            width="600px">
            <div class="long-content">
                <p v-for="i in 20" :key="i">这是长内容弹窗的第 {{ i }} 行内容，用于测试内容区域的滚动功能。当内容超出一定高度时，内容区域会出现滚动条，但弹窗本身不会超出屏幕范围。</p>
            </div>
        </Modal>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './modal.vue';

// 控制各种弹窗的显示
const basicModalVisible = ref(false);
const customModalVisible = ref(false);
const draggableModalVisible = ref(false);
const longContentModalVisible = ref(false);

// 打开各种弹窗的方法
const openBasicModal = () => {
    basicModalVisible.value = true;
};

const openCustomModal = () => {
    customModalVisible.value = true;
};

const openDraggableModal = () => {
    draggableModalVisible.value = true;
};

const openLongContentModal = () => {
    longContentModalVisible.value = true;
};

// 弹窗事件处理
const handleCancel = () => {
    console.log('取消操作');
};

const handleConfirm = () => {
    console.log('确认操作');
    basicModalVisible.value = false;
};
</script>

<style lang="scss" scoped>
.modal-example {
    padding: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    
    .example-btn {
        padding: 8px 16px;
        background-color: #1464d5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
        
        &:hover {
            background-color: #4285f4;
        }
    }
    
    .long-content {
        p {
            margin-bottom: 10px;
        }
    }
    
    .custom-btn {
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #d9d9d9;
        background-color: white;
        transition: all 0.3s;
        
        &:hover {
            border-color: #1464d5;
            color: #1464d5;
        }
        
        &.custom-btn-primary {
            background-color: #1464d5;
            border-color: #1464d5;
            color: white;
            
            &:hover {
                background-color: #4285f4;
                border-color: #4285f4;
            }
        }
        
        &.custom-btn-danger {
            background-color: #ff4d4f;
            border-color: #ff4d4f;
            color: white;
            
            &:hover {
                background-color: #ff7875;
                border-color: #ff7875;
            }
        }
    }
}
</style>
